<template>
  <div>
    <!-- table -->
    <a-card>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="memberLoading"
      >
        <template slot="img" slot-scope="text">
          <template>
            <img @click="handleClickReview($hostServer+text)" class="table-img" :src="$hostServer+text" alt="">
          </template>
        </template>
        <template slot="is_verify" slot-scope="text, record">
          <template v-if="record.verify_detail == 0">{{ $t('shopList.ddsh') }}</template>
          <template v-else-if="record.verify_detail == 1"><a-tag color="green">{{ $t('shopList.yrz') }}</a-tag></template>
          <template v-else><a-tag color="gray">{{ $t('shopList.wrz') }}</a-tag></template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a @click="handleClickRecharge(record.id)">{{ $t('shopList.cz') }}</a>
            <a-divider type="vertical" />
            <a-popconfirm title="$t('shopList.sfysccx')" @confirm="remove(record.key, record.id)">
              <a style="color:red">{{ $t('shopList.sc') }}</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <create-form ref="createModal" @ok="handleOk" />
    </a-card>
  </div>
</template>

<script>
import CreateForm from './CreateForm'
import { mixin, mixinDevice } from '@/utils/mixin'

export default {
  name: 'AdvancedForm',
  mixins: [mixin, mixinDevice],
  components: {
    CreateForm
  },
  data () {
    return {
      description: this.$t('shopList.zswzdsjxx'),
      loading: false,
      memberLoading: false,
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('shopList.zh'),
          dataIndex: 'username',
          key: 'username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('shopList.zsxm'),
          dataIndex: 'realname',
          key: 'realname',
          scopedSlots: { customRender: 'realname' }
        },
        {
          title: this.$t('shopList.sfzh'),
          dataIndex: 'id_card',
          key: 'id_card',
          scopedSlots: { customRender: 'id_card' }
        },
        {
          title: this.$t('shopList.ewmsk'),
          dataIndex: 'img_qrcode',
          key: 'img_qrcode',
          scopedSlots: { customRender: 'img' }
        },
        {
          title: '身份证图1',
          dataIndex: 'img_card1',
          key: 'img_card1',
          scopedSlots: { customRender: 'img' }
        },
        {
          title: '身份证图2',
          dataIndex: 'img_card2',
          key: 'img_card2',
          scopedSlots: { customRender: 'img' }
        },
        {
          title: this.$t('shopList.kyye'),
          dataIndex: 'balance',
          key: 'balance',
          scopedSlots: { customRender: 'balance' }
        },
        {
          title: this.$t('shopList.rz'),
          dataIndex: 'is_verify',
          key: 'is_verify',
          scopedSlots: { customRender: 'is_verify' }
        },
        {
          title: this.$t('shopList.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],

      errors: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleOk (val) {
      this.$http.post('/shop/recharge', this.$qs.stringify({
        id: this.curr_id,
        money: val.desc
      })).then(res => {
        if (res.code === 0) {
          this.getList()
          this.$notification.success({
            message: this.$t('shopList.cg'),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t('shopList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('shopList.sb'),
          description: err.message
        })
      })
    },
    getList () {
      this.$http.get('/shop/list').then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('shopList.sb'),
          description: err.message
        })
      })
    },
    handleClickRecharge (id) {
      this.curr_id = id
      this.$refs.createModal.add()
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    newMember () {
      const length = this.data.length
      this.data.push({
        key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
        name: '',
        workId: '',
        department: '',
        editable: true,
        isNew: true
      })
    },
    remove (key, id) {
      this.$http.post('/shop/delete', this.$qs.stringify({
        id: id
      })).then(res => {
        const newData = this.data.filter(item => item.key !== key)
        this.data = newData
      }).catch(err => {
        this.$notification.error({
          message: this.$t('shopList.sb'),
          description: err.message
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
</style>
